<template>
    <div class="index">


        <div class="detail">
            <h2>BOM扣减详情</h2>
            <el-descriptions title="" :column="2" :border='true' class="tab" :contentStyle="CS">
                <el-descriptions-item label="名称">{{ result.name }}</el-descriptions-item>
                <el-descriptions-item label="日期">{{ result.date }}</el-descriptions-item>
                <el-descriptions-item label="状态">{{ result.state }}</el-descriptions-item>
                <el-descriptions-item label="源单据">{{ result.origin }}</el-descriptions-item>
                <!-- <el-descriptions-item label="公司id">{{ result.companyId }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="位置id">{{ result.locationId }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="productId">{{ result.productId }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="包装id">{{ result.packageId }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="合作伙伴id">{{ result.partnerId }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="Inventoried Lot/Serial Number">{{ result.lotId }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="Inventory of">{{ result.filter }}</el-descriptions-item>
                <el-descriptions-item label="Inventoried Category">{{ result.categoryId }}</el-descriptions-item>
                <el-descriptions-item label="Include Exhausted Products">{{ result.exhausted }}</el-descriptions-item>
                <el-descriptions-item label="创建者id">{{ result.createUid }}</el-descriptions-item>
                <el-descriptions-item label="创建日期">{{ result.createDate }}</el-descriptions-item>
                <el-descriptions-item label="更新者id">{{ result.writeUid }}</el-descriptions-item>
                <el-descriptions-item label="更新日期">{{ result.writeDate }}</el-descriptions-item>
                <el-descriptions-item label="Force Accounting Date">{{ result.accountingDate }}</el-descriptions-item>
                <el-descriptions-item label="源单据">{{ result.origin }}</el-descriptions-item>
                <el-descriptions-item label="到期日期">{{ result.arrivalDate }}</el-descriptions-item>
                <el-descriptions-item label="Package Num">{{ result.packageNum }}</el-descriptions-item>
                <el-descriptions-item label="销售订单">{{ result.saleOrderId }}</el-descriptions-item> -->

            </el-descriptions>
            <!-- 合计show-summary -->
            <h2>扣减明细</h2>
            <el-table height="650" :data="tableData" style="width: 90%;margin: -15px auto;"
                :header-cell-style="{ background: '#f8f8f9', color: 'black', 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }" border>

                <el-table-column prop="productName" label="产品">
                    <template slot-scope="scope">
            <div @click="stockdetail(scope.row)">
              <a href="javascript:;">{{ scope.row.productName }}</a>
            </div>
          </template>
                </el-table-column>

                <!-- <el-table-column prop="locationName" label="位置" >
                </el-table-column> -->
                <el-table-column prop="theoreticalQty" label="理论数量">
                </el-table-column>
                <el-table-column prop="handleNum" label="操作数量">
                </el-table-column>
                <el-table-column prop="productQty" label="实际数量">
                </el-table-column>





            </el-table>



        </div>
 <!-- 库存详情弹框 -->
 <div v-if="showStockCD">
      <el-dialog :visible.sync="openStock" width="1500px" append-to-body :destroy-on-colse="true" @close='closeDialog'>
        <Stockdetail :fid="stockid"></Stockdetail>
      </el-dialog>
    </div>
    </div>
</template>
<script>
import { listInventory, getInventory, delInventory, addInventory, updateInventory } from "@/api/system/inventory";

export default {
    data() {
        return {
            // 是否显示弹框，用来解决第二次弹框组件内容没变化的问题
            showStockCD: true,
            // 传给库存详情页的id
            stockid: null,
            // 库存详情弹框
            openStock: false,
            // 列表描述单元格的样式
            CS: {
                //   'text-align': 'center',  //文本居中
                'max-width': '280px',   //最小宽度
                'word-break': 'break-all'  //过长时自动换行
            },
            // 列表详情
            result: {},
            // 产品订单行表格
            tableData: [],
            //操作详情表格
            tableData2: [],
            // 供应商信息
            result2: {},
        };
    },
    mounted() {
        // 通过$route.query将传过来的值接收;
        let id = this.$route.query.listId;
        this.getList(id);


    },
    methods: {
        // 列表详情
        getList(id) {
            getInventory(id).then(res => {
                // console.log(res);
                this.result = res.data
                this.tableData = res.data.stockInventoryLines

            })
        },
        // 点击产品名称弹出详情
        stockdetail(row) {
            // console.log(row)

            this.showStockCD = true
            this.stockid = row.productTemplateId
            this.openStock = true

        },
        // 关闭弹框的时候销毁内容  再次点击重新创建
        closeDialog() {
            this.showStockCD = false
        },

    },
    components: {
        Stockdetail: () => import('@/views/system/stockdetail/index.vue')
    },
    props: {},
    watch: {},
    computed: {},
    created() { },
};
</script>
<style lang="scss"  scoped>
* {
    margin: 0;
    padding: 0;
}

.index {
    // background: #f9f9f9;
    border: 1px transparent solid;


}

h2 {
    text-align: center;
    line-height: 80px;
}


.detail {
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
    width: 80%;

    .tab {
        width: 90%;
        margin: 20px auto;
    }

    .line {
        margin: 30px auto;
        // border: 1px rgb(224, 17, 17) solid;
        padding: 10px;
        height: 20px;
    }

    .total {

        // border: 1px red solid;
        width: 90%;
        margin: 50px auto;

        // margin: 40px 60% 30px;
        // border-top: 2px gray solid;
        // text-align:right;
        .totalright {
            width: 30%;
            // float: right;
            margin-left: 70%;
            border-top: 2px gray solid;

            p {
                line-height: 40px;
                text-align: right;
            }
        }

    }



}

.product {
    width: 80%;
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
}

.my-content {
    background: #1f1e1e;
}


::v-deep .el-descriptions-item__label.is-bordered-label {
    font-weight: bold;
    color: #6d6a6a;
    background: #f8f8f9;
}
</style>